<!DOCTYPE html>
<html>
<head>
    <title>Way Point Examples</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
    <script src="js/waypoints.js"></script>
    <style type="text/css">
        #wrapper {
            width: 80%;
            border: black 1px dashed;
            margin: auto;
            height: 1000px;
        }

        #top, #bottom {
            height: 200px;
            border: blue 1px dashed;
            margin: 1px;
        }
    </style>
    <script>
        $(document).ready(function () {
            $('#bottom').waypoint({
                handler: function (direction) {
                    $('#bottom').append(direction);
                },
                enabled: false}),
            $('a').click(function(){
                $('#bottom').waypoint('enable');
            })
        });

//        $.fn.waypoint.defaults = {
//            context: window,
//            continuous: true,
//            enabled: true,
//            horizontal: false,
//            offset: 0,
//            triggerOnce: false
//        }
    </script>
</head>
<body>
<div id="wrapper">
    <div id="top">
        Top
        <a href="#">Click to enable</a>
    </div>
    <div id="bottom">
        Bottom
    </div>

</div>
</body>
</html>